import React, { useRef, useState } from "react";
import "./style/App.scss";
import { Button, List, Typography } from "antd";
//处理数据
import _ from "lodash";
//动态class类名
import classNames from "classnames";
//随机数
import { v4 as uuidV4 } from "uuid";
//moment轻量版
import dayjs from "dayjs";
const data = [
  {
    id: 1,
    name: "一七",
    content: "Racing car sprays burning fuel into crowd.",
    count: 18,
    flag: false,
    Date: "2020-09-09",
  },
  {
    id: 2,
    name: "二七",
    content: "Japanese princess to wed commoner",
    count: 59,
    flag: true,
    Date: "2020-09-09",
  },
  {
    id: 3,
    name: "三七",
    content: "Australian walks 100km after outback crash.",
    count: 37,
    flag: false,
    Date: "2020-09-09",
  },
  {
    id: 4,
    name: "四七",
    content: "Los Angeles battles huge wildfires.",
    count: 1859,
    flag: true,
    Date: "2020-09-09",
  },
];
const tabs = [
  {
    key: "1",
    tab: "Tab 1",
  },
  {
    key: "2",
    tab: "Tab 2",
  },
  {
    key: "3",
    tab: "Tab 3",
  },
];
function App() {
  const [list, setList] = useState(_.orderBy(data, "count", ["asc"]));
  const [tablist, setTabList] = useState(tabs);
  const [value, setValue] = useState("");
  const handDel = (id) => {
    console.log(id);
    setList(list.filter((item) => item.id !== id));
  };

  const [type, setType] = useState("1");
  const handClickTabs = (id) => {
    console.log(id);
    setType(id);
    //lodash处理库
    setList(_.orderBy(list, "count", ["desc"]));
  };

  const inputRef = useRef(null);

  const [content, setContent] = useState("");
  const handSubmit = () => {
    setList([
      ...list,
      {
        id: uuidV4(),
        content,
        name: "五七",
        count: 1859,
        flag: true,
        Date: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      },
    ]);
    //清空
    setContent("");
    //聚焦，获取dom，focus
    inputRef.current.focus();
  };
  return (
    <div className="app">
      <textarea
        type="text"
        ref={inputRef}
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <Button onClick={handSubmit}>添加</Button>
      {/* <input type="text" ref={inputRef} />
      <Button onClick={() => console.dir(inputRef.current)}>获取</Button> */}
      <br />
      <div className="tab-wrap">
        {tablist.map((item, i) => (
          <div className="tab-item" key={i}>
            {/* <span
              className={`nav-item ${type === item.key ? "active" : ""}`}
              onClick={() => handClickTabs(item.key)}
            >
              {item.tab}
            </span> */}
            <span
              className={classNames("nav-item", { active: type === item.key })}
              onClick={() => handClickTabs(item.key)}
            >
              {item.tab}
            </span>
          </div>
        ))}
      </div>
      <br />{" "}
      <div className="list-wrap">
        {list.map((item, i) => (
          <div className="list-item" key={i}>
            <span className="item">{item.id}———————</span>
            <span className="item">{item.count}———————</span>
            <span className="item">{item.name}———————</span>
            <span className="item">{item.Date}———————</span>
            <span className="item">{item.content}</span>
            {item.flag && (
              <Button onClick={() => handDel(item.id)}>删除</Button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;
